<template>
  <div class="todo-container">
    <!-- 上半部分：输入区域 -->
    <header class="input-section">
      <h1>待办事项</h1>
      <div class="input-group">
        <input
          v-model="newTask"
          @keyup.enter="addTask"
          type="text"
          placeholder="请输入新的待办事项..."
          class="task-input"
        />
        <button @click="addTask" class="add-btn">添加</button>
      </div>
    </header>

    <!-- 中间部分：列表区域 -->
    <main class="list-section">
      <ul class="task-list">
        <li
          v-for="(task, index) in tasks"
          :key="index"
          class="task-item"
          :class="{ completed: task.completed }"
        >
          <span @click="toggleTask(index)" class="task-text">
            {{ task.text }}
          </span>
          <button @click="removeTask(index)" class="delete-btn">删除</button>
        </li>
      </ul>
    </main>

    <!-- 下半部分：任务状态区域 -->
    <footer class="status-section">
      <p>总任务数: {{ tasks.length }}</p>
      <p>已完成: {{ completedTasks }}</p>
      <p>待完成: {{ pendingTasks }}</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 新任务输入
const newTask = ref('');

// 任务列表
const tasks = ref([
  { text: '学习 Vue 3', completed: false },
  { text: '编写待办事项应用', completed: true }
]);

// 添加任务
const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push({
      text: newTask.value.trim(),
      completed: false
    });
    newTask.value = ''; // 清空输入框
  }
};

// 切换任务完成状态
const toggleTask = (index) => {
  tasks.value[index].completed = !tasks.value[index].completed;
};

// 删除任务
const removeTask = (index) => {
  tasks.value.splice(index, 1);
};

// 计算已完成任务数
const completedTasks = computed(() => {
  return tasks.value.filter(task => task.completed).length;
});

// 计算待完成任务数
const pendingTasks = computed(() => {
  return tasks.value.length - completedTasks.value;
});
</script>

<style scoped>
.todo-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-section {
  text-align: center;
  margin-bottom: 20px;
}

.input-section h1 {
  margin: 0 0 15px 0;
  color: #333;
}

.input-group {
  display: flex;
  gap: 10px;
}

.task-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.add-btn {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.add-btn:hover {
  background-color: #0056b3;
}

.list-section {
  margin-bottom: 20px;
  min-height: 200px;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.task-item:hover {
  background-color: #f1f1f1;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: #666;
}

.delete-btn {
  padding: 6px 10px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.delete-btn:hover {
  background-color: #c82333;
}

.status-section {
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 4px;
  text-align: center;
  color: #495057;
  font-size: 14px;
}
</style>